<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ page import="java.sql.*"%>
<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700&display=swap" rel="stylesheet">
<meta charset="UTF-8">
<title>请选择您的餐厅</title>
<style>

  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }

  /* 页面基础样式 */
  body {
    font-family: 'Montserrat', sans-serif; /* 设置字体 */
    line-height: 1.6; /* 设置行高 */
    color: #333; /* 设置文本颜色为深色 */
  }

  .container {
    width: 80%;
    margin: auto;
    overflow: hidden;
    padding: 20px;
  }

  h1, h2, h3 {
    text-shadow: 1px 1px 2px rgba(0,0,0,0.2); /* 添加文字阴影 */
  }

  h1 {
    text-align: center; /* 标题居中 */
    margin-bottom: 20px; /* 下边距 */
    font-size: 2.5rem; /* 设置标题字体大小 */
    color: #555; /* 设置标题文本颜色 */
  }

  .restaurant-list {
    display: flex; /* 使用弹性盒模型布局 */
    flex-wrap: wrap; /* 允许项目换行 */
    justify-content: center; /* 水平居中 */
    gap: 20px; /* 项目之间的间隔 */
  }

  .restaurant-item {
   background: linear-gradient(to right, #3498db, #2c3e50);/* 设置渐变背景 */
    box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* 添加阴影效果 */
    padding: 20px;
    border-radius: 5px; /* 边框圆角 */
    text-align: center;
    width: 200px; /* 设置固定宽度 */
    margin-bottom: 20px; /* 下边距 */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* 添加过渡效果 */
  }

  .restaurant-item:hover {
    transform: scale(1.05); /* 鼠标悬停时放大 */
    box-shadow: 0 8px 16px rgba(0,0,0,0.2); /* 鼠标悬停时更大的阴影效果 */
  }

  .restaurant-item img {
    width: 100%; /* 图片宽度自适应 */
    height: 150px; /* 设置固定高度 */
    object-fit: cover; /* 图片填充模式 */
    border-radius: 5px 5px 0 0; /* 图片圆角 */
  }

  .restaurant-item h3 {
    margin-top: 10px; /* 上边距 */
    color: #fff; /* 设置文本颜色 */
  }

  a {
    text-decoration: none; /* 移除链接下划线 */
  }
  </style>
</head>


<body>
<div class="container">
    <h1>欢迎来到点餐后端系统</h1>
    <div class="restaurant-list">
    <h2>请选择<br>您的餐馆</h2>
      <%
      //接收用户姓名
      String customer_name = request.getParameter("customer_name");
      
        Class.forName("org.mariadb.jdbc.Driver");
        Connection conn = DriverManager.getConnection("jdbc:mariadb://localhost:3306/mealdb?user=root&password=1230321");
        Statement stmt = conn.createStatement();
        String sql ="select * from restaurant";
        ResultSet rs = stmt.executeQuery(sql);
        while (rs.next()){
        	//这个name指的是餐馆name
        	String id = rs.getString("id");
            String name = rs.getString("name");
            String img = rs.getString("img");
            String address = rs.getString("address");
            //String toherf = "restaurantIndex.jsp?restaurant_name="+name+"&customer_name="+customer_name;
      %>
      <div class="restaurant-item">
      <a href='receptionistIndex.jsp?customer_name=<%=customer_name%>&restaurant_name=<%=name%>'>
        <img src="<%=img%>" alt="<%=name%>"></a>
        <h3><%=name%></h3>
        <h3><%=address%></h3>
        <!-- 这里可以添加更多关于餐馆的信息，如评分等 -->
      </div>
      <%
        }
        rs.close();
        stmt.close();
        conn.close();
      %>
    </div>
  </div>
</body>
</html>